<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>


    <script>
            // 闭包: 
                // 函数嵌套,一个函数(内)有权访问另一个函数(外)作用域的变量.
                // 闭包可以让数据变成私有的.
                

            // 编码方式 1:
            function outerFunc(){// 外部函数
                var index = 1;// 局部变量
                function innerFunc(){// 内部函数
                    console.log(index);// 1
                }
                innerFunc();// 在 outerFunc 函数作用域中调用
            }
            // outerFunc();
            // console.log(index);//  报错 , index is not defined


             // 编码方式 2 :
             // (暂时忽略)
             function outerFunc2(){
                 var index = 1;// 局部变量
                 function innerFunc(){
                    index ++; // 在内部函数作用域,自增一
                    console.log(index);
                 }
                 // 返回值: 内部函数
                 return innerFunc;
             }

             // 获取了内部函数
            //  var f = outerFunc2();
            //  f();  // 在控制台输出结果: 2 
            //  f();  // 在控制台输出结果: 3 
            //  f();  // 在控制台输出结果: 4 
            // 总结: 每次调用的都是内部函数

            // 直接调用函数 outerFunc2()
            outerFunc2()();// 在控制台输出结果: 2
            outerFunc2()();// 在控制台输出结果: 2
            outerFunc2()();// 在控制台输出结果: 2
            // 总结: outerFunc 和 innerFunc 都被调用了
            // outerFunc 这个函数如果调用了,index就会被重置掉



            function waibu () {
                var index = 1;
                function neibu () {
                    index ++ ;
                    console.log(index);
                }
                return neibu;
            }

            var h = waibu();
            h();
            h();
            h();

            function waibu2 (){
                var index = 1 ;
                function neibu2 () {
                    console.log(index);
                }
                neibu2();
            }
    </script>
</body>
</html>